<template>
    <div class="dataList_box">
        <div class="dataList">
            <!-- 左边文字 -->
            <div class="left_title">
                <i class="icon">
                    <el-icon size="16px">
                        <Memo />
                    </el-icon>
                </i>
                <span>数据列表</span>
            </div>
            <!-- 右边按钮 -->
            <div class="right_button">
                <el-button @click="addDataList">添加</el-button>
            </div>
        </div>
        <div class="dataList_container">
            <el-table :data="tableList" style="width: 100%" :border="true">
                <el-table-column label="编号" width="120" prop="id" />
                <el-table-column label="分类名称" width="180" prop="name" />
                <el-table-column label="级别">
                    <template #default="scope">
                        {{ scope.row.level === 0 ? '一级' : '二级' }}
                    </template>
                </el-table-column>
                <el-table-column label="商品数量" width="100" prop="productCount" />
                <el-table-column label="数量单位" width="100" prop="productUnit" />
                <el-table-column label="导航栏">
                    <template #default="scope">
                        <el-switch :model-value="scope.row.navStatus === 1"
                            @change="changeNav(scope.row.id, scope.row.navStatus)" />
                    </template>
                </el-table-column>
                <el-table-column label="是否显示" width="100">
                    <template #default="scope">
                        <el-switch :value="scope.row.showStatus === 1"
                            @change="changeShow(scope.row.id, scope.row.showStatus)" />
                    </template>
                </el-table-column>
                <el-table-column label="排序" width="100" prop="sort" />
                <el-table-column label="设置" width="180" fixed="right" :border="true">
                    <template #default="scope">
                        <el-button size="small" @click="checkChildren(scope.row.id)"
                            :disabled="scope.row.level == 1 ? true : false">查看下级</el-button>
                        <el-button size="small">转移商品</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-button @click="redactFn(scope.row.id)">编辑</el-button>
                        <el-button type="danger" @click="delList(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
        </div>
    </div>
</template>

<script setup lang="ts">
//引入api
import * as request from "@/request/modules/productCategory";
//引入图标
import { Memo } from "@element-plus/icons-vue";
import useTable from "@/hooks/useTable";
import { ref, watch, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute();
const router = useRouter();
const reload = inject('reload');
let { tableList, pagination, handleSizeChange, handleCurrentChange, fetchData } = useTable(request.productCategoryAPI, {
    parentId: 0,
});

const changeNav = async (id: number, navStatus: number) => {
    console.log(id, navStatus);

    await request.navStatusAPI({
        ids: id,
        navStatus: navStatus === 0 ? 1 : 0
    })
    ElMessage({
        message: '修改成功',
        type: 'success',
        duration: 500
    })
    reload();
}
const changeShow = async (ids: number, showStatus: number) => {
    await request.showStatusAPI({
        ids,
        showStatus: showStatus === 0 ? 1 : 0
    })
    ElMessage({
        message: '修改成功',
        type: 'success',
        duration: 500
    })
    reload();
}
const checkChildren = async (id: number) => {
    router.push('/pms/productCate?id=' + id)
    console.log(route.fullPath);
    let res = await request.productCategoryAPI({
        parentId: id
    })
    tableList.value = res.list

}
//删除
const delList = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除改品牌',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await request.deleteAPI(id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            reload();
        })
}
//添加数据
const addDataList = () => {
    router.push("addProductCate")
}
//编辑
const redactFn = (id: number) => {
    router.push("/pms/updateProductCate?id=" + id);
}
//路由导航
router.beforeEach((to, from, next) => {
    console.log(route.fullPath);

    if (route.fullPath == `/pms/productCate?id=${route.query.id}`) {
        fetchData();
        next();
    } else {
        next()
    }
})
</script>

<style lang="less"  scoped>
.dataList_box {
    padding: 10px 20px;
    --main-bg-color: brown;
}

.dataList {
    display: flex;
    padding: 20px;
    margin-top: 50px;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    height: 62px;
    box-sizing: border-box;
    color: var(--main-bg-color);

    .left_title {
        overflow: hidden;

        span {
            margin-left: 5px;
        }
    }
}

.dataList_container {

    ::v-deep(.cell) {
        text-align: center;
    }
}
</style>